<!DOCTYPE html>
<html>
  <head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <a id="toc"></a>
    <h1>TypeScript to JavaScript</h1>
    <a href="#class-metadata">Classes and Class Metadata</a><br>
    <a href="#property-metadata">Input and Output Metadata</a><br>
    <a href="#dependency-injection">Dependency Injection</a><br>
    <a href="#other-property-metadata">Host and Query Metadata</a><br>

    <hr>
    <h4 id="class-metadata">Classes and Class Metadata</h4>
    <hero-view id="class-metadata">Loading hero-view...</hero-view>
    <hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>

    <hr>
    <h4 id="property-metadata">Input and Output Metadata</h4>
    <hero-io>Loading hero-io...</hero-io>

    <hr>
    <h4 id="dependency-injection">Dependency Injection</h4>
    <hero-di>Loading hero-di...</hero-di>
    <hero-di-inject>Loading hero-di-inject...</hero-di-inject>
    <hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>

    <hr>
    <h4 id="other-property-metadata">Host and Query Metadata</h4>
    <heroes-bindings>Loading heroes-bindings...</heroes-bindings>
    <heroes-queries id="other-property-metadata">Loading heroes-queries...</heroes-queries>
  </body>

</html>
